<!--
 * @Author: anxia.ack anchenkai@come-future.com
 * @Date: 2025-05-07 22:45:08
 * @LastEditors: anxia.ack anchenkai@come-future.com
 * @LastEditTime: 2025-05-08 15:36:11
 * @FilePath: /free-learning/src/views/dashboard/components/consult-trend.vue
 * @Description: 咨询趋势图组件
-->
<template>
  <div ref="chartRef" :style="{ width, height }" />
</template>

<script setup lang="ts">
import { ref, onMounted, watch } from "vue";
import type { EChartsOption } from "echarts";
import { useECharts } from "@/hooks/useECharts";
import { getDailyCounselCount } from "@/api/dashbord";
import moment from "moment";

defineOptions({
  name: "ConsultTrend",
});

const props = defineProps<{
  width?: string;
  height?: string;
  timeRange?: "week" | "month";
}>();

const chartRef = ref<HTMLElement>();
let chart: ReturnType<typeof useECharts>;

// 图表配置
const getOptions = (data: any): EChartsOption => {
  return {
    tooltip: {
      trigger: "axis",
      axisPointer: {
        type: "shadow",
      },
    },
    grid: {
      left: "3%",
      right: "4%",
      bottom: "3%",
      containLabel: true,
    },
    xAxis: {
      type: "category",
      boundaryGap: false,
      data: data.dates || [],
      axisLine: {
        lineStyle: {
          color: "#ddd",
        },
      },
    },
    yAxis: {
      type: "value",
      axisLine: {
        show: true,
        lineStyle: {
          color: "#ddd",
        },
      },
      splitLine: {
        lineStyle: {
          color: "#eee",
        },
      },
    },
    series: [
      {
        name: "咨询人数",
        type: "line",
        smooth: true,
        data: data.counts || [],
        itemStyle: {
          color: "#409EFF",
        },
        areaStyle: {
          color: {
            type: "linear",
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              {
                offset: 0,
                color: "rgba(64,158,255,0.2)",
              },
              {
                offset: 1,
                color: "rgba(64,158,255,0)",
              },
            ],
          },
        },
      },
    ],
  };
};

// 加载图表数据
const loadChartData = async () => {
  try {
    console.log(props.timeRange);
    // TODO: 替换为实际的API调用
    // const data = await CounselorAPI.getConsultTrend({ timeRange: props.timeRange });
    let startDate, endDate;
    if (props.timeRange === "week") {
      startDate = moment().startOf("week").format("YYYY-MM-DD");
      endDate = moment().endOf("week").format("YYYY-MM-DD");
    } else if (props.timeRange === "month") {
      startDate = moment().startOf("month").format("YYYY-MM-DD");
      endDate = moment().endOf("month").format("YYYY-MM-DD");
    }
    const res = await getDailyCounselCount(startDate, endDate);
    const mockData = {
      dates: res.map((item) => item.date),
      counts: res.map((item) => item.counselCount),
    };

    if (chart) {
      chart.setOption(getOptions(mockData));
    }
  } catch (error) {
    console.error("加载咨询趋势数据失败", error);
  }
};

// 监听时间范围变化
watch(
  () => props.timeRange,
  () => {
    loadChartData();
  }
);

onMounted(() => {
  if (chartRef.value) {
    chart = useECharts(chartRef.value);
    loadChartData();
  }
});
</script>
